window.onload=function(){
   
    let bannerLis=document.querySelectorAll('.list li');
    let listContets=document.querySelectorAll('.list li .content');
    let bannePs=document.querySelectorAll('.list li p');
    let shangping=document.querySelector('.shangping');
    
    this.console.log(shangping)
    
for(let i=0;i<bannerLis.length;i++){
    bannerLis[i].addEventListener('mouseover',function(){
        bannePs[i].className='active';
        listContets[i].className='content show'
    })
    bannerLis[i].addEventListener('mouseout',function(){
        bannePs[i].className='';
        listContets[i].className='content '
    })
}




var mySwiper = new Swiper ('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay:{
        delay: 1000,//1秒切换一次
        disableOnInteraction:false,    // 鼠标移出 开始自动播放
        pauseOnMouseEnter:true,  //鼠标移入停止自动播放
    },
    // 加入 数字按钮
    pagination: {
        el: '.swiper-pagination',
        clickable: true,  
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })     
  let html=''; 
  for(let i=0;i<12;i++){
   
    html+=` 
        <div class="shubiao">
            <div class="shubiaotubiao"></div>
            <div class="limitime"></div>
            <div class="text3">
                <div class="text4">黑爵青蜂侠六键电竞游戏鼠标</div>
                <div class="text5">全国联保 一年免费包换</div>
                <div class="text6">￥:299</div>
            </div>
        </div>
 `;
}
console.log(shangping);
 shangping.innerHTML=html;
}


let  ebookTitleItems=document.querySelectorAll('.ebook-title-item');
let eBookneirongs=document.querySelectorAll('.eBookneirong');
ebookTitleItems[2].className='ebook-title-item title-acitve';
eBookneirongs[2].className='eBookneirong show';
 for(let i=0;i<ebookTitleItems.length;i++){
    ebookTitleItems[i].addEventListener('click',function(){
        for (let j=0;j<eBookneirongs.length;j++){
            ebookTitleItems[j].className='ebook-title-item';
            eBookneirongs[j].className='eBookneirong';

        }
        ebookTitleItems[i].className='ebook-title-item title-acitve';
        eBookneirongs[i].className='eBookneirong show';
    })
 }
function swipers(a){
    new Swiper (a, {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay:{
            delay: 1000,//1秒切换一次
            disableOnInteraction:false,    // 鼠标移出 开始自动播放
            pauseOnMouseEnter:true,  //鼠标移入停止自动播放
        },
        // 加入 数字按钮
        pagination: {
            el: '.swiper-pagination',
            clickable: true,  
            renderBullet: function (index, className) {
              return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })  
}
 swipers('.swiper1');
 swipers('.swiper2');
 swipers('.swiper3');
 swipers('.swiper4');
 swipers('.swiper5');
 swipers('.swiper6');
//   手风琴js设置
 let shoufengqinSpans=document.querySelectorAll('.shoufengqintitle');
 let yincangs=document.querySelectorAll('.yincang');
 let biaoti=document.querySelectorAll('.biaoti')
 biaoti[0].style.display='none';
 yincangs[0].style.display='block';
 shoufengqinSpans[0].style.height='150px'

 for(let i=0;i<shoufengqinSpans.length;i++){
     shoufengqinSpans[i].addEventListener('mouseover',function(){
     for (let j=0;j<yincangs.length;j++){
        biaoti[j].style.display='block';
        yincangs[j].style.display='none';
        // 所以没移入的高度是隐藏前的高度
        shoufengqinSpans[j].style.height='38px'
     }
    //  选择移入的盒子高度发生变化，变成隐藏图片的高度
     biaoti[i].style.display='none';
     yincangs[i].style.display='block';
     shoufengqinSpans[i].style.height='150px'
     })
 }
//侧边返还栏移入移除效果设置
 let icons=document.querySelectorAll('.iconbox div:nth-child(1)');
 let imgs=document.querySelectorAll('.iconbox div:nth-child(2)');
 let ionboxs=document.querySelectorAll('.iconbox');
 let inconss=document.querySelector('.icon')
console.log(icons);

   for(let i=0;i<icons.length;i++){
       icons[i].addEventListener('mouseover',function(){
           imgs[i].style.display='block';
           ionboxs[i].style.background='#93d46f';
    // 添加移入图片变色的类名
             icons[i].classList.add('iconname')
       })
       icons[i].addEventListener('mouseout',function(){
     
        imgs[i].style.display='none';
        ionboxs[i].style.background='';
    //  移除移出的时候图片恢复原来的颜色
        icons[i].classList.remove('iconname')
    })
   }
let yincangfangdajing=document.querySelector('.yincangfangdajing');
let yincangtu=document.querySelector('.yincangtu')
let back = document.querySelector('.back');
   window.addEventListener('scroll', function () {
    let top = document.body.scrollTop || document.documentElement.scrollTop
this.console.log(top);
// 大于600就显示
if(top>600){
    yincangfangdajing.style.top='0';
  
}else{
    // 小于600就隐藏
    yincangfangdajing.style.top='-60px';
    
}
if(top>700){
    inconss.style.display='block';
  
}else{
    // 侧边栏小于700就隐藏
    inconss.style.display='none';
    
}
if(top>1800){
    back.style.display = 'block';
}else{
    back.style.display = 'none';
}
 
})

    // 点击按钮---事件监听 click 
            // 更改滚动条距离顶部的位置 为 0
            back.addEventListener('click',function(){
                //每间隔 10ms 反复执行代码 
                // 获取当前滚动条 距顶部的位置  top 
                // top -=100;
                // 修改滚动条的距顶部位置 
             let timer = setInterval(function(){
                    let  top = document.body.scrollTop || document.documentElement.scrollTop;
                    top-=150;
                    document.body.scrollTop =  top;
                    document.documentElement.scrollTop  = top ;

                    //清除定时器  top <= 0 
                    if(top <=0){
                       clearInterval(timer); 
                    }
                },10)
            })




















let input1=document.querySelector('#yincanginput');
let input2=document.querySelector('#shuru');
console.log(input1);
input1.addEventListener('input',function(){
    // 执行input事件，将input1的数据赋值给input2.
    input2.value=input1.value;
});
input2.addEventListener('input',function(){
    //   // 执行input事件，将input2的数据赋值给input1.
    input1.value=input2.value;
})
// 服装的选项卡js

let clothfr=document.querySelectorAll('.cloth-fr div');
let clothcontent=document.querySelectorAll('.clothcontent');
// 默认第一个按键默认橙底白字   显示第一个内容
clothfr[0].classList.add('title-acitve');
clothcontent[0].classList.add('show');
console.log(clothcontent);
for(let i=0;i<clothfr.length;i++){
    clothfr[i].addEventListener('click',function(){
        // console.log(i);
        
        for(let j=0;j<clothcontent.length;j++){
            // 执行点击事件之后，除了点击之外的按键颜色不变，对应内容隐藏
            clothfr[j].className='';
            clothcontent[j].className='clothcontent';

        }
        // 执行点击事件之后，对应内容显示，点击的按键 橙底白字
        clothfr[i].classList.add('title-acitve');
        clothcontent[i].classList.add('show');
    })
}
let sportcontents=document.querySelectorAll('.sportcontent');
let sports=document.querySelectorAll('.sport-fr div');
sports[0].classList.add('title-acitve');
sportcontents[0].classList.add('show');
for(let i=0;i<clothfr.length;i++){
    sports[i].addEventListener('click',function(){
        console.log(sports);
        
        for(let j=0;j<clothcontent.length;j++){
            // 执行点击事件之后，除了点击之外的按键颜色不变，对应内容隐藏
            sports[j].className='';
            sportcontents[j].className='sportcontent';

        }
        // 执行点击事件之后，对应内容显示，点击的按键 橙底白字
        sports[i].classList.add('title-acitve');
        sportcontents[i].classList.add('show');
    })
}

let childs=document.querySelectorAll('.child-fr div');
let childcontents=document.querySelectorAll('.childcontent');
childs[0].classList.add('title-acitve');
childcontents[0].classList.add('show');

for(let i=0;i<childs.length;i++){
    childs[i].addEventListener('click',function(){
        for(let j=0;j<childcontents.length;j++){
            // 执行点击事件之后，除了点击之外的按键颜色不变，对应内容隐藏
            childs[j].className='';
            childcontents[j].className='childcontent';

        }
        // 执行点击事件之后，对应内容显示，点击的按键 橙底白字
        childs[i].classList.add('title-acitve');
        childcontents[i].classList.add('show');
    })
}
 let shangpings=document.querySelectorAll('.shangping');
 for(let i=0;i<shangpings.length;i++){
    shangpings[i].addEventListener('mouseover',function(){
        shangpings[i].style.background='#f2f2f2'
    })

    shangpings[i].addEventListener('mouseout',function(){
        shangpings[i].style.background=''
    })
 }
let yuandians=document.querySelectorAll('.yuandian div');
let goodsss=document.querySelectorAll('.gooodss');
yuandians[0].style.background='#f60';
goodsss[0].className='gooodss show';
for(let i=0;i<yuandians.length;i++){
    yuandians[i].addEventListener('click',function(){
        for(let j=0;j<goodsss.length;j++){
            yuandians[j].style.background='';
            goodsss[j].className='gooodss';
        }
        yuandians[i].style.background='#f60';
        goodsss[i].className='gooodss show';
    })
}